Forms এবং User Input

React Native অ্যাপ্লিকেশনগুলিতে Forms এবং User Input অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ ব্যবহারকারীদের কাছ থেকে তথ্য সংগ্রহ এবং তা প্রক্রিয়া করা প্রায় সব অ্যাপের জন্য অপরিহার্য। Forms তৈরি করার জন্য React Native অনেক সুবিধাজনক কম্পোনেন্ট প্রদান করে, যেমন TextInput, Button, Picker, ইত্যাদি। এই ফিচারগুলির মাধ্যমে আপনি ব্যবহারকারীর ইনপুট গ্রহণ এবং তা প্রক্রিয়া করতে পারেন।

নিচে React Native এ Forms এবং User Input এর বিস্তারিত আলোচনা করা হলো:

Forms তৈরি করা

React Native-এ ফর্ম তৈরি করার জন্য সাধারণত TextInput কম্পোনেন্ট ব্যবহার করা হয়, যা ব্যবহারকারীর ইনপুট গ্রহণ করতে ব্যবহৃত হয়। এছাড়াও Button কম্পোনেন্ট ব্যবহার করে ফর্ম জমা দেওয়ার জন্য একটি বাটন তৈরি করা হয়।

TextInput - ব্যবহারকারীর ইনপুট নেওয়া

TextInput একটি স্ট্যান্ডার্ড কম্পোনেন্ট যা ব্যবহারকারীর ইনপুট নিতে ব্যবহৃত হয়। এই কম্পোনেন্টের মাধ্যমে আপনি বিভিন্ন ধরনের ইনপুট (যেমন নাম, ইমেইল, পাসওয়ার্ড) গ্রহণ করতে পারেন।

উদাহরণ:

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

const App = () => {
  const [name, setName] = useState('');

  const handleSubmit = () => {
    alert('Submitted: ' + name);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingLeft: 8,
        }}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

ব্যাখ্যা:

• TextInput-এ placeholder ব্যবহার করে ইনপুট ফিল্ডের জন্য নির্দেশনা প্রদান করা হয়েছে।
• value={name}: ইনপুটের মান স্টেট থেকে নিয়ন্ত্রণ করা হচ্ছে।
• onChangeText={setName}: ব্যবহারকারী ইনপুট দিলে তা স্টেটে আপডেট হবে।
• Button-এ onPress ইভেন্ট ব্যবহার করে ফর্ম সাবমিট করার জন্য ফাংশন কল করা হয়েছে।

Multiple Inputs Handling

যদি ফর্মে একাধিক ইনপুট ফিল্ড থাকে, তবে প্রতিটি ইনপুটের জন্য আলাদা স্টেট ব্যবহৃত হয়।

উদাহরণ:

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = () => {
    alert('Name: ' + name + '\nEmail: ' + email);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingLeft: 8,
        }}
      />
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingLeft: 8,
        }}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

ব্যাখ্যা:

• এখানে দুটি ইনপুট ফিল্ড আছে, একটি নামের জন্য এবং একটি ইমেইল এর জন্য।
• প্রতিটি ইনপুট ফিল্ডের জন্য আলাদা স্টেট (name, email) ব্যবহৃত হয়েছে।
• handleSubmit ফাংশনটি দুইটি ইনপুটের মানকে সংগ্রহ করে এবং একটি এলার্টে প্রদর্শন করে।

Form Validation

ফর্মের ইনপুট ভ্যালিডেশন খুব গুরুত্বপূর্ণ, যেমন নাম এবং ইমেইল ফিল্ডে সঠিক তথ্য প্রদান করা নিশ্চিত করা। React Native-এ ফর্ম ভ্যালিডেশন করতে সাধারণত if শর্ত ব্যবহার করা হয়।

উদাহরণ (ভ্যালিডেশন):

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [errorMessage, setErrorMessage] = useState('');

  const handleSubmit = () => {
    if (!name || !email) {
      setErrorMessage('All fields are required!');
    } else {
      setErrorMessage('');
      alert('Form Submitted');
    }
  };

  return (
    <View style={{ padding: 20 }}>
      {errorMessage ? <Text style={{ color: 'red' }}>{errorMessage}</Text> : null}
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingLeft: 8,
        }}
      />
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 10,
          paddingLeft: 8,
        }}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

ব্যাখ্যা:

• এখানে একটি errorMessage স্টেট যোগ করা হয়েছে যা যদি ফর্মে কোন তথ্য না থাকে তবে ব্যবহারকারীকে একটি ত্রুটির বার্তা দেখাবে।
• handleSubmit ফাংশনে if শর্ত ব্যবহার করে ইনপুট ভ্যালিডেশন করা হয়েছে।

Picker - ড্রপডাউন মেনু

React Native-এ ড্রপডাউন মেনু তৈরি করার জন্য Picker কম্পোনেন্ট ব্যবহার করা হয়, যা একটি নির্দিষ্ট অপশন থেকে ব্যবহারকারীকে ইনপুট নির্বাচনের সুযোগ দেয়।

উদাহরণ:

import React, { useState } from 'react';
import { View, Picker, Button, Text } from 'react-native';

const App = () => {
  const [selectedLanguage, setSelectedLanguage] = useState('java');

  const handleSubmit = () => {
    alert('Selected Language: ' + selectedLanguage);
  };

  return (
    <View style={{ padding: 20 }}>
      <Picker
        selectedValue={selectedLanguage}
        onValueChange={(itemValue) => setSelectedLanguage(itemValue)}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
        <Picker.Item label="Python" value="python" />
      </Picker>
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

ব্যাখ্যা:

• Picker ব্যবহার করে ড্রপডাউন মেনু তৈরি করা হয়েছে।
• selectedValue দ্বারা নির্বাচিত মান নিয়ন্ত্রণ করা হচ্ছে এবং onValueChange দ্বারা মান পরিবর্তিত হলে স্টেট আপডেট হচ্ছে।

সারাংশ

React Native-এ Forms এবং User Input খুবই গুরুত্বপূর্ণ। TextInput, Button, Picker ইত্যাদি কম্পোনেন্ট ব্যবহার করে সহজেই ফর্ম তৈরি করা যায়। ফর্মের মধ্যে ইনপুট গ্রহণ, ভ্যালিডেশন এবং ডাটা প্রক্রিয়া করা সম্ভব। ফর্মগুলোতে ব্যবহারকারী থেকে ইনপুট সংগ্রহ এবং তা প্রয়োজনীয় প্রক্রিয়া করার জন্য এই কম্পোনেন্টগুলো অত্যন্ত উপকারী।

TextInput কম্পোনেন্ট React Native-এ ব্যবহারকারীর ইনপুট গ্রহণ করার জন্য ব্যবহৃত হয়। এটি টেক্সট বক্স হিসেবে কাজ করে এবং ব্যবহারকারী কিবোর্ডের মাধ্যমে কিছু ইনপুট প্রদান করতে পারে।

নিচে TextInput কম্পোনেন্টের ব্যবহার এবং ইউজার ইনপুট সংগ্রহের একটি উদাহরণ দেওয়া হলো।

TextInput কম্পোনেন্টের ব্যবহার

React Native এর TextInput কম্পোনেন্টের মাধ্যমে আপনি ব্যবহারকারীর ইনপুট গ্রহণ করতে পারেন এবং সেই ইনপুটকে স্টেটের মধ্যে সংরক্ষণ করতে পারেন। এর জন্য, আমরা সাধারণত state ব্যবহার করে ইনপুটের মানটি ধারণ করি এবং onChangeText বা onChange ইভেন্টের মাধ্যমে এটি আপডেট করি।

উদাহরণ:

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

const MyComponent = () => {
  // State to hold the input value
  const [inputValue, setInputValue] = useState('');

  // Function to handle input change
  const handleInputChange = (text) => {
    setInputValue(text);
  };

  // Function to handle submit
  const handleSubmit = () => {
    alert(`User input: ${inputValue}`);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18 }}>Enter some text:</Text>
      
      {/* TextInput to collect user input */}
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          marginBottom: 20,
          paddingLeft: 10,
        }}
        placeholder="Type something here"
        value={inputValue} // Binding the input value to state
        onChangeText={handleInputChange} // Updating the state when text changes
      />

      {/* Button to submit */}
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default MyComponent;

ব্যাখ্যা:

1. State Management:
   • useState হুক ব্যবহার করে একটি inputValue স্টেট তৈরি করা হয়েছে, যা TextInput এর ইনপুট মান ধারণ করবে।
   • setInputValue ফাংশন ব্যবহার করে ইনপুট পরিবর্তন হলে স্টেট আপডেট হয়।
2. TextInput কম্পোনেন্ট:
   • value={inputValue}: TextInput এর মানকে inputValue স্টেটের সাথে বাঁধা (bind) করা হয়েছে, যার মানে হচ্ছে যখন ইনপুট পরিবর্তিত হবে, তখন সেটি স্টেটেও আপডেট হবে।
   • onChangeText={handleInputChange}: যখন ব্যবহারকারী টেক্সট ইনপুট পরিবর্তন করবেন, তখন handleInputChange ফাংশন কল হবে এবং এটি inputValue স্টেট আপডেট করবে।
3. Button:
   • একটি Button ব্যবহার করে ব্যবহারকারী যখন "Submit" বাটনে ক্লিক করবেন, তখন handleSubmit ফাংশন চালু হবে, যা inputValue স্টেটের মানকে একটি alert দিয়ে প্রদর্শন করবে।

TextInput এর অন্যান্য গুরুত্বপূর্ণ প্রোপার্টি:

• placeholder: টেক্সট ইনপুট ফিল্ডে যখন কোনো টেক্সট নেই, তখন একটি নির্দেশিকা টেক্সট দেখানোর জন্য ব্যবহৃত হয়।
• secureTextEntry: এটি টেক্সট ইনপুট ফিল্ডে নিরাপদ ইনপুট (যেমন পাসওয়ার্ড) প্রদর্শন করতে ব্যবহৃত হয়।
• keyboardType: এটি ব্যবহারকারীর কিবোর্ডের ধরণ নির্ধারণ করতে ব্যবহৃত হয় (যেমন, numeric, email-address, default ইত্যাদি)।
• multiline: এটি দিয়ে আপনি একাধিক লাইনে ইনপুট নিতে পারেন।
• autoFocus: এটি ইনপুট ফিল্ডে অটোফোকাস করতে ব্যবহৃত হয়।

উদাহরণ:

<TextInput
  secureTextEntry={true}
  placeholder="Enter your password"
  style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 20 }}
/>

সারাংশ

React Native এর TextInput কম্পোনেন্ট ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট সহজেই সংগ্রহ করতে পারেন। value এবং onChangeText প্রোপার্টি ব্যবহার করে ইনপুটের মান স্টেটে সংরক্ষণ করা হয় এবং ব্যবহারকারী যেকোনো পরিবর্তন করলে সেটি স্টেটের মাধ্যমে আপডেট হয়। এতে ইনপুট ফিল্ডে টেক্সট প্রবাহ এবং তা প্রক্রিয়াকরণের প্রক্রিয়া খুব সহজ হয়।

React Native অ্যাপ্লিকেশনে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন অত্যন্ত গুরুত্বপূর্ণ, কারণ ফর্মের মাধ্যমে ব্যবহারকারী ইনপুট গ্রহণ করা হয়, এবং সঠিক ইনপুট নিশ্চিত করতে ভ্যালিডেশন প্রয়োজন হয়। ফর্মের ডেটা প্রক্রিয়া করতে এবং ইনপুটের ভুল এড়াতে, React Native-এ বিভিন্ন ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন টেকনিক্স ব্যবহার করা হয়।

১. Form Handling in React Native

React Native-এ ফর্ম হ্যান্ডলিং সাধারণত TextInput কম্পোনেন্টের মাধ্যমে করা হয়। ফর্মের প্রতিটি ইনপুটের মান স্টেটের মাধ্যমে নিয়ন্ত্রণ করা হয়, এবং ব্যবহারকারী ইনপুটের সাথে সম্পর্কিত পরিবর্তনগুলো onChangeText বা onChange প্রপার্টি দ্বারা ধরা হয়।

সাধারণ ফর্ম হ্যান্ডলিং:

import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = () => {
    // ফর্মের ইনপুট ডেটা এখানে প্রসেস করা হবে
    alert(`Name: ${name}\nEmail: ${email}\nPassword: ${password}`);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Enter your password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

export default App;

এখানে কী হচ্ছে:

• useState হুকের মাধ্যমে প্রতিটি ফর্ম ইনপুটের মান রাখা হচ্ছে।
• TextInput কম্পোনেন্টে value এবং onChangeText প্রপার্টি ব্যবহার করে ইনপুটের মান স্টেটে সংরক্ষিত হচ্ছে।
• ব্যবহারকারী Submit বাটনে ক্লিক করলে handleSubmit ফাংশনটি ইনভোক করা হচ্ছে এবং ইনপুট ডেটা দেখানো হচ্ছে।

২. Form Validation Techniques

ফর্মের ইনপুট ভ্যালিডেশন গুরুত্বপূর্ণ, কারণ ব্যবহারকারীরা ভুল তথ্য দিয়ে ফর্ম সাবমিট করতে পারে। React Native-এ ফর্ম ভ্যালিডেশন করার জন্য সাধারণভাবে if স্টেটমেন্ট, RegEx এবং তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করা হয়।

ভ্যালিডেশন Techniques:

1. সাধারণ ভ্যালিডেশন (যেমন ফিল্ড খালি না থাকা):

const handleSubmit = () => {
  if (!name || !email || !password) {
    alert('All fields are required!');
    return;
  }

  if (!validateEmail(email)) {
    alert('Please enter a valid email!');
    return;
  }

  // ফর্মের ডেটা প্রসেস
  alert(`Name: ${name}\nEmail: ${email}\nPassword: ${password}`);
};

2. ইমেইল ভ্যালিডেশন (RegEx ব্যবহার করে):

const validateEmail = (email) => {
  const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  return regex.test(email);
};

এখানে কী হচ্ছে:

• validateEmail ফাংশনটি একটি রেগুলার এক্সপ্রেশন (RegEx) ব্যবহার করে ইমেইল ঠিকানা যাচাই করে।
• যদি ইনপুটগুলি খালি থাকে বা ইমেইল ভুল ফরম্যাটে থাকে, তাহলে alert প্রদর্শিত হবে।

৩. Error Messages এবং Conditional Rendering

ব্যবহারকারী যখন ভুল ইনপুট দেয়, তখন আপনাকে তাত্ক্ষণিকভাবে ত্রুটির বার্তা প্রদর্শন করতে হবে। React Native-এ ত্রুটির বার্তা দেখানোর জন্য সাধারণত Text কম্পোনেন্ট ব্যবহার করা হয় এবং এগুলিকে conditional rendering এর মাধ্যমে শো করা হয়।

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  const validate = () => {
    const errors = {};
    if (!name) errors.name = 'Name is required';
    if (!email) errors.email = 'Email is required';
    if (!password) errors.password = 'Password is required';
    if (email && !validateEmail(email)) errors.email = 'Enter a valid email';
    setErrors(errors);

    return Object.keys(errors).length === 0;
  };

  const handleSubmit = () => {
    if (validate()) {
      alert(`Name: ${name}\nEmail: ${email}\nPassword: ${password}`);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      {errors.name && <Text style={{ color: 'red' }}>{errors.name}</Text>}
      
      <TextInput
        placeholder="Enter your email"
        value={email}
        onChangeText={setEmail}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
      
      <TextInput
        placeholder="Enter your password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}
      
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
};

এখানে কী হচ্ছে:

• errors স্টেটটি ব্যবহৃত হচ্ছে ফর্মের প্রতিটি ফিল্ডের ত্রুটি বার্তা সংরক্ষণ করতে।
• ফর্মের ইনপুটের পাশে ত্রুটি বার্তা দেখানো হচ্ছে, যদি সংশ্লিষ্ট ফিল্ডটি ভুল বা খালি থাকে।

৪. তৃতীয় পক্ষের লাইব্রেরি ব্যবহার:

ফর্ম ভ্যালিডেশন এবং হ্যান্ডলিংয়ের জন্য অনেক তৃতীয় পক্ষের লাইব্রেরি উপলব্ধ, যেমন:

1. Formik: React Native-এ ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশনের জন্য এটি একটি জনপ্রিয় লাইব্রেরি।
2. Yup: এটি একটি ভ্যালিডেশন লাইব্রেরি যা সাধারণভাবে Formik এর সাথে ব্যবহৃত হয়।

Formik এর উদাহরণ:

import React from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import { Formik } from 'formik';

const App = () => (
  <Formik
    initialValues={{ name: '', email: '', password: '' }}
    validate={(values) => {
      const errors = {};
      if (!values.name) errors.name = 'Name is required';
      if (!values.email) errors.email = 'Email is required';
      if (!values.password) errors.password = 'Password is required';
      return errors;
    }}
    onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
  >
    {({ handleChange, handleBlur, handleSubmit, values, errors }) => (
      <View style={{ padding: 20 }}>
        <TextInput
          placeholder="Enter your name"
          onChangeText={handleChange('name')}
          onBlur={handleBlur('name')}
          value={values.name}
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        {errors.name && <Text style={{ color: 'red' }}>{errors.name}</Text>}

        <TextInput
          placeholder="Enter your email"
          onChangeText={handleChange('email')}
          onBlur={handleBlur('email')}
          value={values.email}
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        {errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}

        <Text

Input
          placeholder="Enter your password"
          onChangeText={handleChange('password')}
          onBlur={handleBlur('password')}
          value={values.password}
          secureTextEntry
          style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
        />
        {errors.password && <Text style={{ color: 'red' }}>{errors.password}</Text>}

        <Button title="Submit" onPress={handleSubmit} />
      </View>
    )}
  </Formik>
);

export default App;

সারাংশ

• Form Handling: React Native তে ফর্ম ইনপুটের মান স্টেট হ্যান্ডলিংয়ের মাধ্যমে নিয়ন্ত্রণ করা হয় এবং ইনপুটের পরিবর্তনগুলি onChangeText অথবা onChange প্রপার্টি দ্বারা ট্র্যাক করা হয়।
• Form Validation: ফর্ম ইনপুটের ভ্যালিডেশন সাধারণত if স্টেটমেন্ট, রেগুলার এক্সপ্রেশন (RegEx), এবং লাইব্রেরির মাধ্যমে করা হয়।
• Error Messages: ভ্যালিডেশন ত্রুটি হলে, ত্রুটির বার্তা ব্যবহারকারীকে জানানো হয় এবং Text কম্পোনেন্টের মাধ্যমে কন্ডিশনাল রেন্ডারিং করা হয়।
• তৃতীয় পক্ষের লাইব্রেরি যেমন Formik এবং Yup ব্যবহার করে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন আরও সহজ করা যায়।

React Native অ্যাপে ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন কার্যকরভাবে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

React Native এ KeyboardAvoidingView এবং ScrollView দুটি কম্পোনেন্ট ব্যবহার করে আপনি ফর্ম ম্যানেজমেন্ট সহজে এবং ব্যবহারকারী বান্ধবভাবে করতে পারেন, বিশেষত যখন আপনি মোবাইল ডিভাইসে ফর্ম ফিল্ডে ব্যবহারকারীর ইনপুট গ্রহণ করছেন এবং কিবোর্ডের উপস্থিতি ফর্মের উপাদানগুলোকে আড়াল না করে।

১. KeyboardAvoidingView:

KeyboardAvoidingView একটি React Native কম্পোনেন্ট যা কিবোর্ডের উপস্থিতিতে স্ক্রিনের উপাদানগুলোর অবস্থানকে অটো সঠিকভাবে ঠিক করতে সাহায্য করে। যখন ব্যবহারকারী টেক্সট ইনপুট ফিল্ডে কিছু টাইপ করে, তখন কিবোর্ডটি খোলে এবং ফর্মের উপাদানগুলো আড়াল হতে পারে। KeyboardAvoidingView এটি সমাধান করে, যাতে কিবোর্ডের উপস্থিতিতে ফর্মের উপাদানগুলো দৃশ্যমান থাকে।

২. ScrollView:

ScrollView ব্যবহার করে আপনি যদি অনেক ইনপুট ফিল্ড বা কন্টেন্ট দেখান, তবে কিবোর্ডের কারণে কিছু উপাদান আড়াল হয়ে যেতে পারে। ScrollView ব্যবহার করে আপনি পুরো ফর্মকে স্ক্রলযোগ্য করতে পারেন, যাতে কিবোর্ডের উপরে গিয়েও ব্যবহারকারী ফর্মের অন্য ফিল্ডে স্ক্রল করতে পারেন।

এখন, আমরা একটি উদাহরণ দেখব যেখানে KeyboardAvoidingView এবং ScrollView ব্যবহার করে একটি সিম্পল ফর্ম ম্যানেজমেন্ট তৈরি করা হয়েছে।

উদাহরণ: KeyboardAvoidingView এবং ScrollView এর সাথে ফর্ম ম্যানেজমেন্ট

import React, { useState } from 'react';
import { View, TextInput, Text, Button, StyleSheet, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = () => {
    // ফর্ম সাবমিট করার জন্য ফাংশন
    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Password:', password);
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'} // iOS এ padding, Android এ height ব্যবহার করা হবে
    >
      <ScrollView contentContainerStyle={styles.scrollView}>
        <View style={styles.form}>
          <Text style={styles.label}>Name</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter your name"
            value={name}
            onChangeText={setName}
          />
          
          <Text style={styles.label}>Email</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter your email"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
          />
          
          <Text style={styles.label}>Password</Text>
          <TextInput
            style={styles.input}
            placeholder="Enter your password"
            secureTextEntry
            value={password}
            onChangeText={setPassword}
          />
          
          <Button title="Submit" onPress={handleSubmit} />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    padding: 20,
  },
  form: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  label: {
    fontSize: 16,
    marginBottom: 8,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    marginBottom: 12,
    paddingLeft: 8,
  },
});

export default App;

বিস্তারিত ব্যাখ্যা:

1. KeyboardAvoidingView:
   • KeyboardAvoidingView কম্পোনেন্ট ব্যবহার করা হয়েছে যাতে কিবোর্ড খোলার সময় ফর্মের উপাদানগুলো আড়াল না হয়। এটি iOS এবং Android উভয়ের জন্য কিবোর্ডের অবস্থান অনুযায়ী উপাদানগুলোর পজিশন ঠিক করে।
   • behavior প্রোপার্টি iOS এবং Android প্ল্যাটফর্মের জন্য আলাদা করে সেট করা হয়েছে:
     • iOS: 'padding', যাতে কিবোর্ডের জন্য পর্যাপ্ত জায়গা থাকে।
     • Android: 'height', যা কিবোর্ডের উপস্থিতিতে ভিউ-এর উচ্চতা পরিবর্তন করে।
2. ScrollView:
   • ScrollView ব্যবহার করা হয়েছে যাতে ফর্মের ইনপুট ফিল্ডগুলো স্ক্রলযোগ্য হয়, বিশেষত যখন ইনপুট ফিল্ডগুলো অনেক বেশি বা কিবোর্ড খুললে কিছু ফিল্ড আড়াল হতে পারে।
3. TextInput:
   • TextInput কম্পোনেন্ট ব্যবহার করে আমরা নাম, ইমেইল, এবং পাসওয়ার্ড ইনপুট ফিল্ড তৈরি করেছি। প্রতিটি ইনপুট ফিল্ডের জন্য ভ্যালু এবং onChangeText প্রোপার্টি ব্যবহার করা হয়েছে।
4. Button:
   • ফর্ম সাবমিট করতে Button কম্পোনেন্ট ব্যবহার করা হয়েছে।

সারাংশ:

React Native এর KeyboardAvoidingView এবং ScrollView কম্পোনেন্ট ব্যবহার করে আপনি একটি ফর্ম ম্যানেজমেন্ট সিস্টেম তৈরি করতে পারেন যেখানে কিবোর্ড খুললে ফর্মের উপাদানগুলো আড়াল হবে না এবং ব্যবহারকারী সহজে ফর্মটি পূরণ করতে পারবে। KeyboardAvoidingView কিবোর্ডের উপস্থিতিতে উপাদানগুলোকে সঠিকভাবে এডজাস্ট করে, এবং ScrollView ফর্মের অনেক ইনপুট ফিল্ড থাকলে সেগুলোর স্ক্রলিং নিশ্চিত করে।

React Native অ্যাপ্লিকেশনগুলিতে ফর্ম তৈরি করা এবং সেগুলির ভ্যালিডেশন করা সাধারণ কাজগুলির মধ্যে একটি। যদিও React Native এর মধ্যে কিছু মৌলিক স্টেট পরিচালনার সরঞ্জাম রয়েছে, তবে ফর্ম ভ্যালিডেশন আরও সহজ এবং কার্যকরী করার জন্য আমরা Formik এবং Yup ব্যবহার করতে পারি। Formik ফর্ম স্টেট পরিচালনা করার জন্য এবং Yup ফর্ম ভ্যালিডেশন করার জন্য ব্যবহৃত হয়।

এখানে Formik এবং Yup এর মাধ্যমে ফর্ম ভ্যালিডেশন করার একটি উদাহরণ দেখানো হলো।

Step 1: প্যাকেজ ইনস্টল করা

প্রথমে, আপনাকে Formik এবং Yup ইনস্টল করতে হবে। নিচের কমান্ডটি ব্যবহার করুন:

npm install formik yup

Step 2: Formik এবং Yup ব্যবহার করা

এখন আমরা একটি উদাহরণ তৈরি করব যেখানে Formik এবং Yup ব্যবহার করে একটি সিম্পল ফর্ম ভ্যালিডেশন তৈরি করা হবে।

import React from 'react';
import { View, TextInput, Text, Button, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

// Yup Validation Schema
const validationSchema = Yup.object().shape({
  username: Yup.string()
    .required('Username is required')
    .min(3, 'Username must be at least 3 characters'),
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
  password: Yup.string()
    .required('Password is required')
    .min(6, 'Password must be at least 6 characters'),
});

const App = () => {
  return (
    <View style={styles.container}>
      <Formik
        initialValues={{ username: '', email: '', password: '' }}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
          <>
            <TextInput
              style={styles.input}
              placeholder="Username"
              onChangeText={handleChange('username')}
              onBlur={handleBlur('username')}
              value={values.username}
            />
            {touched.username && errors.username && (
              <Text style={styles.errorText}>{errors.username}</Text>
            )}

            <TextInput
              style={styles.input}
              placeholder="Email"
              onChangeText={handleChange('email')}
              onBlur={handleBlur('email')}
              value={values.email}
            />
            {touched.email && errors.email && (
              <Text style={styles.errorText}>{errors.email}</Text>
            )}

            <TextInput
              style={styles.input}
              placeholder="Password"
              secureTextEntry
              onChangeText={handleChange('password')}
              onBlur={handleBlur('password')}
              value={values.password}
            />
            {touched.password && errors.password && (
              <Text style={styles.errorText}>{errors.password}</Text>
            )}

            <Button onPress={handleSubmit} title="Submit" />
          </>
        )}
      </Formik>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 10,
    paddingLeft: 8,
  },
  errorText: {
    fontSize: 12,
    color: 'red',
  },
});

export default App;

কোডের ব্যাখ্যা

1. Formik ব্যবহার:
   • Formik লাইব্রেরি দ্বারা ফর্মের স্টেট, ভ্যালিডেশন এবং সাবমিশন পরিচালনা করা হয়। ফর্মের ইনিশিয়াল ভ্যালু, ভ্যালিডেশন স্কিমা এবং সাবমিট ফাংশন এখানে সেট করা হয়েছে।
   • handleChange, handleBlur, handleSubmit এর মাধ্যমে ফর্মের ইনপুট পরিবর্তন, ব্লার এবং সাবমিট কন্ট্রোল করা হয়।
2. Yup Validation Schema:
   • Yup এর মাধ্যমে একটি ভ্যালিডেশন স্কিমা তৈরি করা হয়েছে। এখানে প্রতিটি ফিল্ডের জন্য প্রয়োজনীয়তা, মিনিমাম লেন্থ এবং ইমেল ফরম্যাট চেক করা হয়েছে।
   • উদাহরণস্বরূপ, username ফিল্ডে min(3) ব্যবহার করা হয়েছে, যার মানে এটি ৩টি অক্ষরের কম হতে পারবে না এবং required() ব্যবহার করা হয়েছে যা এই ফিল্ডটি অবশ্যই পূর্ণ করতে হবে।
3. এরর হ্যান্ডলিং:
   • যদি ফিল্ডে কোনো ত্রুটি থাকে, তবে Formik-এর errors এবং touched অবজেক্ট ব্যবহার করে ত্রুটির বার্তা প্রদর্শন করা হয়েছে।
4. ইউজার ইন্টারফেস:
   • TextInput ব্যবহার করে ফর্ম ফিল্ড তৈরি করা হয়েছে। secureTextEntry ব্যবহার করে পাসওয়ার্ড ইনপুটের ক্ষেত্রকে সিক্রেট তৈরি করা হয়েছে।
   • Button ব্যবহার করে ফর্ম সাবমিট করা হয়েছে।

ফিচার ও সুবিধা

• Formik:
  • ফর্ম স্টেট ম্যানেজমেন্ট: ফর্মের ইনপুট, এরর এবং সাবমিট স্টেট খুব সহজে ম্যানেজ করতে সাহায্য করে।
  • পুনঃব্যবহারযোগ্য ফর্ম: ফর্মের সবকটি অংশকে এক জায়গায় ম্যানেজ করা সহজ হয়, ফলে কোড পুনঃব্যবহারযোগ্য হয়।
• Yup:
  • বৈধতা চেক করা: ফিল্ডের বিভিন্ন শর্ত পূর্ণ কিনা তা চেক করা সহজ হয় (যেমন: ইমেল ফরম্যাট, মিনিমাম লেন্থ)।
  • কাস্টম ভ্যালিডেশন: আপনি প্রয়োজন হলে কাস্টম ভ্যালিডেশনও তৈরি করতে পারেন।

সারাংশ

Formik এবং Yup ব্যবহার করে React Native-এ ফর্ম ভ্যালিডেশন করা সহজ এবং কার্যকর। Formik ফর্মের স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, আর Yup ফর্মের ভ্যালিডেশন স্কিমা তৈরিতে সহায়ক। এই দুটি লাইব্রেরি একত্রে ব্যবহার করলে ফর্মের কার্যকারিতা এবং কোডের গঠন অনেক সহজ এবং পরিষ্কার হয়।